﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>缩略图</title>
    <link href="~/Resources/mainFrame/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Resources/mainFrame/css/plugins/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />
    <link href="~/Resources/mainFrame/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <script src="~/Resources/mainFrame/js/plugins/layer/laydate/laydate.js"></script>
    <script src="~/Resources/mainFrame/js/jquery.min.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/bootstrap-fileinput/fileinput.js"></script>
    <script src="~/Resources/mainFrame/js/bootstrap.min.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/bootstrap-fileinput/fileinput_locale_zh.js"></script>
    <script src="~/Resources/tools/jquery-hcq2-extend.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/select/bootstrap-select.min.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/validate/messages_zh.min.js"></script>
    <script src="~/Resources/mainFrame/js/demo/form-validate-demo.min.js"></script>
    <style>
        .fileClass label{
            text-align:right;
        }
       .col-sm-7{
           margin-bottom:8px;
        }
       #doc_type_sel{
           border:1px solid #CCCCCC;
           display:none;
           position:absolute;
           z-index:90;
           width:93%;
           background-color:#fff;
       }
       #doc_type_sel li:hover{
           background-color:#CCCCCC;
           cursor:pointer;
       }
       #doc_type_sel li{
           list-style-type:none;
           margin-left:-40px;
           padding-left:5px;
       }
    </style>
</head>
<body onclick="closeType()">
    <div class="container kv-main">
        <form class="form-horizontal m-t" id="orgFormTable" method="post" enctype="multipart/form-data">
            <div class="fileClass" style="height:350px;">
                <div class="form-group" id="picType">
                    <label class="col-sm-3 control-label">图片类别</label>
                    <div class="col-sm-7">
                        <select id="fileType" name="fileType" class="form-control input-sm select" placeholder="请选择图片类别" style="height:35px;">
                            <option value=0 selected>横版缩略图（4:3）</option>
                            <option value=1>竖版缩略图（3:4）</option>
                            <option value=2>等比缩略图（1:1）</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">缩略图<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：<span style="color:red"><strong>温馨提示：缩略图文件大小不能超过1M！</strong></span></label>
                    <div class="col-sm-7">
                        <input id="fileUpload" type="file" multiple class="file" required="" aria-required="true"/>
                        <input type="hidden" id="file_id" name="file_id" />
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        var upFile=[];
        var file_id = $.getUrls("file_id");//文档ID
        var pic_type = $.getUrls("pic_type");//类别 
        var pageType = $.getUrls("pageType");//页面类型
        var $url = '/SourceManager/UpPicLoadFile/' + file_id + '?pic_type=' + pic_type + "&pageType=" + pageType, isUpload = 0;//0 ：不上传，1：上传
        $("#fileUpload").fileinput({
            uploadUrl: $.ctx() + $url, //上传的地址
            allowedFileExtensions: ['jpg', 'png', 'bmp'],//允许上传格式
            overwriteInitial: false,
            showUpload: false,//是否显示上传按钮
            maxFileSize: 1024,//单位为kb，大小限制在10M
            maxFileCount: 10,//最多文件个数
            minFileCount: 1,//最少文件个数
            uploadExtraData: function () {
                var dataJson = {}, obj = $('#orgFormTable').serializeArray();
                $.each(obj, function (i, v) {
                    dataJson[v.name] = v.value;
                });
                dataJson["isUpload"] = isUpload;
                return dataJson;
            },
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on('fileuploaded', function (event, data, previewId, index) {
            window.parent.docManager.closeUpPicForm(data.response);
        }).on('filebatchselected', function (event, files) {
            //选中文件后
            isUpload = 1;
        });
        //保存上传数据
        function upLoadDoc() {
            //判断字段是否合法
            //if (!$('#orgFormTable').valid()) return false;
            if (isUpload > 0) 
                $("#fileUpload").fileinput("upload");//上传              
        }
        $(function () {
            if (!file_id) {
                layer.msg("文档异常，不能上传！");
                return false;
            }
            if ((pic_type && "undefined" != pic_type && undefined != pic_type) && pageType !="VRBuilding" )
                $('#picType').css("display", "none");
            $('#file_id').val(file_id);
        });
    </script>
</body>
</html>